<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速问答</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<div>
    <p style="text-align: center;"><span id="time" style="font-size:1.5rem;color: #d58512">5</span><span>秒内回答</span></p>
    <p style="text-align: center;"><span style="font-size:1.5rem">你猜老公我知道你傻吗？</span></p>
</div>
<div class="button hd">
    <button class="btn btn-success" onclick="show(1);">知道</button>
</div>
<div class="button hd">
    <button class="btn btn-success" onclick="show(0);">不知道</button>
</div>
<div>
    <p id="ewm" style="text-align: center;display: none">
        <img src="./erweima.jpg" />
    </p>
</div>
<style>
    .hd{display: none}
    .btn {
        display: inline-block;
        font-weight: 400;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        border: 1px solid transparent;
        padding: .65rem 1.25rem;
        font-size: 1rem;
        line-height: 1.25;
        border-radius: .25rem;
        transition: all .15s ease-in-out;
        margin-right: 5px;
        margin-bottom: 15px;
        width: 100%;
    }
    .btn-success {
        color: #fff;
        background-color: #34bfa3;
        border-color: #34bfa3;
    }
    .btn.m-btn--wide {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .m-demo .m-demo__preview.m-demo__preview--btn .btn {
        margin-right: 5px;
        margin-bottom: 15px;
    }
</style>
<script>
    var time = 5;
    var timehandler = setInterval(function(){
        time--;
        document.getElementById('time').innerHTML = time;
        if(time==0){
            clearInterval(timehandler);
            layer.confirm('这个问题还用考虑5秒吗？看来是真傻！', {
                title:false,
                closeBtn: 0,
                btn: ['好吧我认了','我要选项！'] //按钮
            }, function(){
                layer.msg('就是爱傻傻的你');
            }, function(){
                $('.button').removeClass('hd')
            });
        }
    },1000);

    function show(type){
        clearInterval(timehandler);
        switch (type){
            case 1:
                layer.confirm('你愿意做我一辈子的小傻瓜吗？', {
                    title:false,
                    closeBtn: 0,
                    btn: ['^-^'] //按钮
                });
                break;
            case 0:
                layer.confirm('其实老公一直都知道，只不过老公一直都爱傻傻的你', {
                    title:false,
                    closeBtn: 0,
                    btn: ['^-^'] //按钮
                });
                break;
        }
    }
</script>
</body>
</html>